<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Vue快速入门</title>
  </head>
  <body>
<!--带插值表达式的div要在script前面-->
    <div id="app">
        <!--
            1.{{message}}:插值表达式
            2.message就是从model的data数据池来设置
            3.当代码执行时，会到data{}数据池中去匹配数据，如果匹配上，就进行替换。
              如果没有匹配上，就会输出空
            4.如果某元素使用了插值表达式，那么位置一定要在绑定的vue对象前面
            5.div元素不是必须的，也可以是其他的元素如span p等，但是约定俗成把vue挂载到div下
              因为div更适合做布局
            6.id也可以随意指定
        -->
        <h1>欢迎你{{message}}-{{name}}</h1>
    </div>

<!--    引入vue.js-->
  <script src = "vue.js"></script>
  <script>
      //创建vue对象
      /*
        1.创建Vue对象实例
        2.控制台输出vm对象，看看vm的结构(data/listener)
       */
      let vm = new Vue({
          el: "#app",   //创建的vue实例挂载到id = app的div下
          data: {   //data{}表示数据池(model有了数据)，以KV的形式设置(根据业务需求设置)
              message:"Hello-Vue!",
              name:"lmy"
          }
      })
      console.log("vm=", vm);
      console.log(vm._data.message);
      console.log(vm.message);
  </script>
  </body>
</html>